<template>
     <view>
         <view class="content">
			<view class="box">
				<view style="font-size: 20px;color:#ffffff;">
					充值金额: {{ select.Money || 0 }}元
				</view>
				<view style="display:flex;margin-top:20rpx">
					<view v-for="item in items" :key="item.ID" :class="select.ID===item.ID?'charge-item-in':'charge-item-out'" @click="change(item)">
						<view style="font-size: 16px;margin-top:20rpx">
							{{item.ProductName}}
						</view>
						<view style="font-size: 12px;">
							{{item.Money}}￥
						</view>
					</view>
					
					
				</view>
				<view style="font-size: 12px;color:#ffffff;margin-top:20rpx;margin-bottom: 20rpx;">
					相关说明:相关说明相关说明相关说明相关说明
				</view>
				<view>
					
					<button style="background-color:#ffdd00;border-radius: 30px;" @click="submitOrder">确认充值</button>
				</view>
				
			</view>
		 </view>
       
		 
     </view>
 </template>

<script>
export default {
	data() {
		return {
			items: [],
			select:{}
		}
	},
	onLoad(option) {
		this.$request.post(this.$api.product.list, {id:2},'form').then(res => {
				this.items=res.data
			})	
	},
	methods: {
		change(item){
			this.select = item
		   },
		   submitOrder(){
			   if (this.isSubmit) {
			   	return;
			   }
			   if (!this.select.ID) {
			   	uni.showModal({
			   		title: '提示',
			   		content: '请选择充值金额',
			   		showCancel: false
			   	});
			   	return;
			   }
			   this.isSubmit = true
			   this.$request.postU(this.$api.order.submitorder, {pid:this.select.ID}).then(res => {
			   		if (res.msg && res.msg == '支付成功') {
			   			uni.showModal({
			   				title: '提示',
			   				content: '下单成功，点击确认进入会员中心！',
			   				showCancel: false,
			   				success: function(res) {
			   					uni.reLaunch({
			   						url: '../my/index'
			   					});
			   				}
			   			});
						this.isSubmit = false
			   		} else if (res.pays) {
			   			uni.requestPayment({
			   				provider: 'wxpay',
			   				timeStamp: res.pays.timeStamp,
			   				nonceStr: res.pays.nonceStr,
			   				package: res.pays.package,
			   				signType: res.pays.signType,
			   				paySign: res.pays.paySign,
			   				success: function(res) {
			   					uni.showModal({
			   						title: '提示',
			   						content: '下单成功，点击确认进入会员中心！',
			   						showCancel: false,
			   						success: function(res) {
			   							uni.reLaunch({
			   								url: '../user/index'
			   							});
			   						}
			   					});
			   				},
			   				fail: function(err) {
			   					this.isSubmit = false
			   				}
			   			});
			   		} else if (res.code == 4444) {
			   			this.isSubmit = false
			   		
			   		}
			   							
			   	})	
		   }
	  }
	}
</script>

<style>
 .content{
 }
 .charge-item-in{
	 border: 1px solid;
	 border-color: #ffdd00;
		
	 width:250rpx;
	 height: 150rpx;
	 margin: 15rpx;
	 text-align: center;
	 background-color:  #ffdd00;
	 color: #000000;
 }
 .charge-item-out{
 	 border: 1px solid;
 	 border-color: #ffffff;
 	 border-radius: 10px;
 	 width:250rpx;
 	 height: 150rpx;
 	 margin: 15rpx;
 	 text-align: center;
	 background-color: #272727;
	 color: #ffffff;
 }
.headimg{
		width: 5rem;
	    height: 5rem;
		margin-left: 50rpx;
	    border-radius: 50%;
	    margin-right: 50rpx;
	    background-position: center;

}
 .login-txt{
	 padding-top:70rpx;
	 margin-bottom: 10rpx;
	 font-size: 14px;
	 color:#FFFFFF
 }
 .uni-list-item__content-title {
 	color: #ffffff !important;
 }
 .uni-list-item {
	 
 	background-color: #272727 !important;
 }
 .box{
	margin:50rpx;
 }
 .line{height: 1px;background: #5d5c5c;}
page {
	    background-color: #272727;
	}
 .list-left{
	 wdith:200px;
	 margin-left:10px;
	 text-align:left;
	 height: 70px;
 }
 .list-right{
 	 margin-left:10px;
	 text-align:left;
	 height: 70px;
 }
 .search-ico-wapper{
     background-color: #FFFFFF;
     display: flex;
     flex-direction:column;
     justify-content: center;
     padding: 0upx 0upx 0upx 40upx;
     border-bottom-left-radius:18px;
     border-top-left-radius: 18px;
 }
 .search-ico-wapper1{
     background-color: #FFFFFF;
     display: flex;
     flex-direction:column;
     justify-content: center;
     padding: 0upx 40upx 0upx 0upx;
     border-bottom-right-radius:18px;
     border-top-right-radius: 18px;
 }
 .shadow{
     width: 638upx;
     height: 60upx;
     border-radius:18px;
     -moz-box-shadow:0 0 10px #e6e6e6;
     -webkit-box-shadow:0 0 10px #e6e6e6;
     box-shadow:0 0 10px #e6e6e6;
     position: relative;
     top: -90upx;
     left: 60upx;
 }
 </style>